<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
    *{      
      -webkit-touch-callout: auto; /* prevent callout to copy image, etc when tap to hold */      
      -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */      
      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */       
      -webkit-user-select:none;
    }  
    html,body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      max-width: 500px;
    }
    #paper {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 100%;
      height: 0px;
    }
  </style>
</head>
<body>
  <div id="paper"></div>
  
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <script src="/js/spritejs.js"></script>

  <script>

    const paper = spritejs.Paper2D('#paper')
    paper.setResolution(800, 800) // 设置 Paper 的实际分辨率
    
    const BaseSprite = spritejs.BaseSprite,
      Color = spritejs.Color

    class Arc extends BaseSprite {
      get contentSize() {
        let [width, height] = this.attr('size')
        const radius = this.attr('radius'),
          lineWidth = this.attr('lineWidth')

        if(width === '') {
          width = 2 * (radius + lineWidth)
        }
        if(height === '') {
          height = 2 * (radius + lineWidth)
        }

        return [width, height]
      }
      render(t, drawingContext) {
        super.render(t, drawingContext)
        const r = this.attr('radius')

        if(r) {
          const path = new Path2D()
          const {width: borderWidth} = this.attr('border')
          const {strokeColor, fillColor, renderMode, lineWidth, direction} = this.attr()

          drawingContext.save()
          drawingContext.translate(borderWidth + lineWidth, borderWidth + lineWidth)

          let angle = this.attr('angle')

          if(direction === 1) {
            angle = angle.map(ang => Math.PI * -ang / 180)
          } else {
            angle = angle.map(ang => Math.PI * ang / 180)
          }

          path.arc(r, r, r, ...angle, direction)
          if(angle[1] - angle[0] < 2 * Math.PI) {
            path.lineTo(r, r)
            path.closePath()
          }

          if(lineWidth) {
            drawingContext.lineWidth = lineWidth
            drawingContext.strokeStyle = strokeColor
            drawingContext.stroke(path)
          }

          if(renderMode === 'fill') {
            drawingContext.fillStyle = fillColor || strokeColor
            drawingContext.fill(path)
          }
          drawingContext.restore()
        }
      }
    }

    Arc.defineAttributes({
      init(attr) {
        attr.setDefault({
          radius: 10,
          fillColor: '',
          strokeColor: '#000',
          renderMode: 'stroke',
          lineWidth: 1,
          angle: [0, 360],
          direction: 1,
        })
      },
      radius(attr, val) {
        attr.set('radius', val)
        attr.clearCache()
      },
      fillColor(attr, val) {
        attr.set('fillColor', new Color(val).str)
        attr.clearCache()
      },
      strokeColor(attr, val) {
        attr.set('strokeColor', new Color(val).str)
        attr.clearCache()
      },
      renderMode(attr, val) {
        attr.set('renderMode', val)
        attr.clearCache()
      },
      lineWidth(attr, val) {
        attr.set('lineWidth', val)
        attr.clearCache()
      },
      angle(attr, val) {
        attr.set('angle', val)
        attr.clearCache()
      },
      direction(attr, val) {
        attr.set('direction', val)
        attr.clearCache()
      }
    })

    const arc = new Arc()
    arc.attr({
      pos: [200, 200],
      //size: [100, 100],
      //bgcolor: '#f00',
      radius: 100,
      border: [10, 'green'],
      padding: 10,
      renderMode: 'fill',
      fillColor: 'blue',
      strokeColor: 'red',
      lineWidth: 20,
      angle: [0, 90],
    })

    paper.layer().appendChild(arc)
  </script>
</body>
</html>